<template>
	<view class="">
		<view class="header flex">
			<!-- <image src="../../static/uni.png" mode=""></image> -->
			<image :src="$wanlshop.oss(info.avatar, 100, 100)" mode="aspectFill"></image>
			<view class=""
				style="flex: 1;height: 100rpx;display: flex;flex-direction: column;justify-content: space-evenly;margin-left: 20rpx;">
				<view class="" style="font-weight: 600;font-size: 30rpx;">
					{{info.shopname || "--"}}
				</view>
				<view class="" style="font-size: 22rpx;color: #7F7F7F;">
					ID:{{info.id || "--"}}
				</view>
			</view>
			<view class="edit" @click="edit">

				编辑资料
			</view>
		</view>
		<view class="box1" style="display: flex;justify-content: space-between;align-items: center;"
			@click="nav('/pagesA/money/money')">
			<view class="" style="flex: 1;">
				<image src="https://fen.fuliaoxx.com/img/new/bg.png" mode="" class="bg"></image>
				<view class="" style="position: relative;z-index: 99;display: flex;align-items: center;">
					<image src="https://fen.fuliaoxx.com/img/new/tip.png" mode=""
						style="margin-right: 14rpx;width: 30rpx;height: 30rpx;">
					</image>
					<view class="">
						我的余额
					</view>
				</view>
				<view class=""
					style="position: relative;z-index: 99;font-size: 46rpx;font-weight: 600;margin-top: 14rpx;">
					{{info.money || 0}}
				</view>
			</view>
			<u-icon name="arrow-right" size="16" bold color="#000000"></u-icon>
		</view>
		<view class="items">

			<view class="item" @click="nav('/pagesA/orders/orders')">
				<image src="https://fen.fuliaoxx.com/img/new/icon1.png" mode=""></image>
				<view class="">
					订单管理
				</view>
			</view>
			<view class="item">
				<image src="https://fen.fuliaoxx.com/img/new/icon2.png" mode=""></image>
				<view class="">
					我的消息
				</view>
			</view>
			<view class="item" @click="nav('/pagesA/data/data')">
				<image src="https://fen.fuliaoxx.com/img/new/icon5.png" mode=""></image>
				<view class="">
					营业收入
				</view>
			</view>
			<view class="item" @click="nav('/pagesA/bzj/bzj')">
				<image src="https://fen.fuliaoxx.com/img/new/icon3.png" mode=""></image>
				<view class="" style="display: flex;flex-direction: column;">
					保证金
					<!-- 	<text style="color: lawngreen;" v-if="protect==2">(已缴纳)</text>
					<text style="color: red;" v-if="protect==1 || protect==null">(点击缴纳)</text> -->
				</view>
			</view>
			<view class="item" @click="relan">
				<image src="https://fen.fuliaoxx.com/img/new/icon1.png" mode=""></image>
				<view class="" style="color: #5d8eff;">
					返回商城
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				protect: 0,
				disabled: false,
				uInfo: {

				},
				info: {

				}
			}
		},
		onLoad() {
			wx.hideHomeButton();
		},
		async onShow() {
			if (!uni.getStorageSync("shop_login_token")) {
				uni.reLaunch({
					url: "/pagesA/login/login"
				})
				return
			}
			await uni.request({
				url: '/index/shopInfo',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					this.info = res.data.shopInfo;
					if (!this.info) {
						uni.reLaunch({
							url: "/pagesA/steps/steps"
						})
						return
					}
					this.uInfo = res.data.userInfo;
					this.protect = res.data.protect;
				}
			});
		},
		methods: {
			relan() {
				uni.removeStorageSync("shop_login_token")
				uni.removeStorageSync("shop_login_info")
				uni.reLaunch({
					url: "/pages/index"
				})
			},
			edit() {
				uni.navigateTo({
					url: "/pagesA/setting/setting"
				})
			},
			async wanlPay(code) {
				let that = this;
				await uni.request({
					url: '/wanlshop/pay/rechargeSubmit',
					method: 'POST',
					data: {
						type: "wechat",
						method: "miniapp",
						code: code,
						money: 0.01
					},
					success: res => {
						uni.hideLoading()
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: async (e) => {
								// this.paySuccess();
								await uni.request({
									url: '/index/shopInfo',
									method: "GET",
									success: res1 => {
										that.info = res1.data.shopInfo;
										that.protect = res1.data.protect;
									}
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							},
							complete: () => {
								this.disabled = false;
							}
						})
					}
				});

			},
			jn() {

				if (this.disabled) return;
				if (this.protect == 1 || this.protect == null) {
					this.disabled = true;
					uni.showLoading({
						mask: true
					})
					uni.login({
						success: (e) => {
							this.wanlPay(e.code);
						},
						fail: (e) => {
							uni.showModal({
								content: "无法获取微信code,原因为: " + e.errMsg,
								showCancel: false
							})
						}
					})
				}
			},
			nav(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.header {
		margin: 30rpx;
		position: relative;
		z-index: 99;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 100px;
			margin-right: 20rpx;
		}

		.edit {
			border: 1rpx solid black;
			color: black;
			padding: 8rpx 26rpx;
			text-align: center;
			border-radius: 100px;
			opacity: .3;
		}
	}

	.items {
		margin: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			width: calc(50vw - 50rpx);
			margin-bottom: 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			view {
				flex: 1;
				text-align: center;
			}
		}
	}

	.box1 {
		margin: 30rpx;
		margin-top: 0;
		position: relative;
		padding: 30rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>